<template>
	<div style="padding: 50px 50px; height: 100vh">
		<yd-form ref="myForm" :options="formOptions" :model="formData" :btns="formBtns" @form-init="handleSearch">
			<template #form-btn="props">
				<div style="display: flex; align-items: center; justify-content: center">
					<el-button class="yd-form-btn" type="primary" @click="onSubmit(props.model)">查询</el-button>
					<el-button class="yd-form-btn" type="primary" @click="onResetFields(props.model)">重置</el-button>
				</div>
			</template>
		</yd-form>
	</div>
</template>
<script lang="tsx" setup>
import { reactive, ref, h } from 'vue';
import ydForm from '@/components/YdForm/index.vue';

// import { FormOptionType } from '@/components/YdForm/form-type';
import useCurrentInstance from '@/utils/useCurrentInstance';
const { proxy } = useCurrentInstance();

// const proxy = instance!.proxy;

// 表单数据
const formData = reactive<anyObj>({
	startTime: '',
	endTime: '',
});

// 表单实例
const myForm = ref();
// 表单配置
let formOptions = ref<FormOptionType>([
	{
		type: 'date-picker',
		label: '日期选择',
		prop: 'dateRange',
		dateType: 'daterange',
	},
	{
		type: 'date-picker',
		label: '日期时间选择',
		prop: 'dateRange',
		span: 7,
		dateType: 'datetimerange',
		shortcutsKeys: ['last1h', 'today', 'lastDay'],
		defaulShortcutsKey: 'last1h',
	},
	{
		type: 'input',
		label: '普通输入框',
		prop: 'username',
		attrs: {
			clearable: true,
		},
		rules: [
			{
				required: true,
				message: '用户名不能为空',
				trigger: 'blur',
			},
			{
				min: 2,
				max: 6,
				message: '用户名在2-6位置之间',
				trigger: 'blur',
			},
		],
	},
	{
		type: 'input',
		label: '插槽输入框',
		prop: 'company',
		attrs: {
			clearable: true,
		},
		slots: {
			append: {
				render: (_config: Record<string, any>) => {
					let str = h('span', 'append');
					return str;
				},
			},
			prepend: {
				render: (_config: Record<string, any>) => {
					let str = h('span', 'prepend');
					return str;
				},
			},
		},
	},

	{
		type: 'checkbox-group',
		label: '复选框',
		prop: 'check',
		span: 6,
		children: [
			{
				label: '苹果',
				value: 1,
			},
			{
				label: '香蕉',
				value: 2,
			},
			{
				label: '梨',
				value: 3,
			},
		],
	},
	{
		type: 'radio-group',
		prop: 'radio',
		label: '单选框',
		children: [
			{
				label: '苹果',
				value: 1,
			},
			{
				label: '香蕉',
				value: 2,
			},
			{
				label: '梨',
				value: 3,
			},
		],
	},
	{
		type: 'select',
		label: '下拉',
		prop: 'dataCenter',
		selectKey: 'id',
		selectAll: true,
		attrs: {
			multiple: true,
			// indeterminate: true,
		},
		api: { name: 'queryDataCenter', params: {} },
	},

	{
		type: 'select',
		label: '联动下拉',
		prop: 'systemId',
		cascaders: [
			{
				cascadersParams: 'businessCode',
				api: {
					name: 'queryBusinessBySystemId',
				},
			},
			{
				cascadersParams: 'businessCode',
				api: {
					name: 'queryBusinessBySystemId',
				},
			},
		],
		children: [
			{
				value: 1,
				id: 1,
				label: '营业厅网台',
			},
			{
				value: 2,
				label: '和我信',
			},
		],
	},
	{
		type: 'select',
		label: '被联动',
		span: 6,
		prop: 'businessCode',
		selectKey: 'code',
		attrs: {
			multiple: true,
			indeterminate: false,
		},
	},

	{
		type: 'select',
		label: '值改变请求字典',
		prop: 'test',
		cascaderParam: {
			data: formData,
			key: 'company',
		},
		api: {
			name: 'queryDataCenter',
		},
		children: [
			{
				value: 1,
				id: 1,
				label: '营业厅网台',
			},
			{
				value: 2,
				label: '和我信',
			},
		],
	},

	{
		type: 'group-select', //分组选择
		label: '分组下拉',
		prop: 'city',
		attrs: {
			multiple: true,
		},
		children: [
			{
				label: '热门城市',
				children: [
					{
						value: 'Shanghai',
						label: '上海',
					},
					{
						value: 'Beijing',
						label: '北京',
					},
				],
			},
			{
				label: '城市名',
				children: [
					{
						value: 'Chengdu',
						label: '成都',
					},
					{
						value: 'Shenzhen',
						label: '深圳',
					},
					{
						value: 'Guangzhou',
						label: '广州',
					},
					{
						value: 'Dalian',
						label: '大连',
					},
				],
			},
		],
	},
	{
		type: 'select',
		label: '远程搜索',
		prop: 'Code',
		selectKey: 'code',
		attrs: {
			remote: true,
			multiple: true,
		},
		api: { name: 'queryAppSystemOptions' },
	},
	{
		type: 'upload',
		label: '文件上传(默认)',
		style: {
			marginTop: '20px',
		},
		prop: 'upload',
		attrs: {
			action: 'https://jsonplaceholder.typicode.com/posts/',
		},
	},
	{
		type: 'upload',
		label: '文件上传(插槽)',
		prop: 'upload',
		style: {
			marginTop: '20px',
		},
		attrs: {
			accept: '',
			showFileList: true, //显示已上传列表
			action: 'https://jsonplaceholder.typicode.com/posts/',
			style: {
				width: '200px',
				height: '200px',
			},
			withCredentials: true, //支持cookie
			drag: false,
			limit: 2,
			multiple: true,
			// after
			fileList: [
				{
					name: 'food.jpeg',
					url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
				},
			],
			// 上传成功
			onSuccess: (_res: ApiResponse, _file: Record<string, any>, _fileList: Record<string, any>[]) => {
				console.log('success', _res);
			},
			// 上传之前
			beforeUpload: (_file: Record<string, any>) => {
				console.log('beforeupload', _file);
			},
			// 文件限制
			handleExceed(files: Record<string, any>, fileList: Record<string, any>) {
				proxy?.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
			},
			// 移除
			beforeRemove(file: Record<string, any>, _fileList: Record<string, any>) {
				return proxy?.$message.warning(`确定移除 ${file.name}？`);
			},
		},
		slots: {
			default: {
				render: (_option: Record<string, any>) => {
					let str = h('span', '点击上传');
					return str;
				},
			},
		},
	},
]);

const formBtns = reactive<BtnType[]>([
	{
		type: 'primary',
		text: '下载',
		handler: (e: any) => {
			console.log('下载', e);
		},
		style: {
			alignSelf: 'center',
		},
	},
]);

const handleSearch = (_model: FormModelType) => {
	console.log('forminit', _model);
};

const onResetFields = (e) => {
	myForm.value?.resetFields();
	console.log('myForm.value?.resetFields()', myForm.value?.resetFields());
	console.log('form', formData);
};

//   提交
const onSubmit = (_model: FormModelType) => {
	console.log('onSubmit', myForm.value);
	myForm.value?.validate((valid: boolean, _msg: any) => {
		console.log('valid', valid);
		console.log('valid', _msg);
		if (valid) {
			proxy?.$message.success('提交');
			console.log('submit', _model);
		}
	});
};
</script>
<!-- -->

<style></style>
